<template>
    <div class="app-container">
        <el-row style="margin-bottom: 20px">
            <el-col :span="1.5">
                <el-button type="primary" @click="saveToDb" size="mini">更新到数据库</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="list">
                <el-table-column label="设备ID" prop="deviceId" />
                <el-table-column label="设备编号" align="center" prop="deviceNo" />
                <el-table-column label="设备代码" align="center" prop="deviceCode" />
                <el-table-column label="设备名称" align="center" prop="deviceName" />
                <el-table-column label="设备IP" align="center" prop="ipAddress" />
                <el-table-column label="在线状态" align="center" prop="isOnline">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.isOnline == 1 ? 'success' : 'danger'">{{ scope.row.isOnline == 1 ? "在线" : "离线" }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="建筑物代码" align="center" prop="buildingCode" />
                <el-table-column label="建筑物名称" align="center" prop="buildingName" />
                <el-table-column label="楼层代码" align="center" prop="floorCode" />
                <el-table-column label="楼层名称" align="center" prop="floorName" />
                <el-table-column label="操作" align="center" width="80">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handlePlay(scope.row)">实况直播</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <pagination v-show="total > 0" :page.sync="queryParams.pageNo" @pagination="getList" />
        <CameraView ref="cameraViewRef" />
    </div>
</template>

<script>
import { getCameraListPage, saveCameraList } from "@/api/res/camera";
import CameraView from "@/views/response/monitor/components/CameraView.vue";
import CameraUtils from "@/utils/cameraUtils";

export default {
    name: "CameraList",
    components: {
        CameraView,
    },
    data() {
        return {
            list: [],
            // 分页
            queryParams: {
                pageNo: 1,
            },
            total: 0,
            pageTitle: "",
        };
    },
    created() {},
    mounted() {
        this.pageTitle = document.title;
        this.getList();
    },
    methods: {
        getList() {
            getCameraListPage(this.queryParams).then(res => {
                this.list = res.data.data;
                this.total = res.data.totalPages * 500;
            });
        },
        handlePlay(row) {
            let deviceCode = row.deviceCode;
            this.$refs.cameraViewRef.show(document.title, deviceCode);
        },
        saveToDb() {
            // loading
            this.$modal.loading("正在保存，请稍后...");
            saveCameraList().then(res => {
                this.$modal.closeLoading();
                if (res.code == 200) {
                    this.$message({
                        message: "保存成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                    });
                }
            });
        },
    },
};
</script>

<style scoped lang="scss"></style>
